<template>
  <el-dialog title="发放卡券" :visible="visible" width="400px" top="30vh" :before-close="handleClose" :close-on-click-modal="false">
    <el-form ref="grant" :model="offline" label-width="100px">
      <el-form-item prop="count" size="small">
        <template v-slot:label>
          <span>生成数量</span>
          <el-popover trigger="hover" transition="el-zoom-in-bottom" placement="top" popper-class="popper">
            <div>单次可生成1~5000张卡券</div>
            <template v-slot:reference><i class="edu-icon-info" /></template>
          </el-popover>
        </template>
        <edu-input-number key="count" :value.sync="offline.count" :args="{ min: 1, max: 5000 }" />
      </el-form-item>
      <el-form-item size="small">
        <el-row type="flex" justify="end">
          <el-button type="primary" :disabled="disableSubmit" @click="onSubmit">保存</el-button>
          <el-button @click="$emit('update:visible', false)">取消</el-button>
        </el-row>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import EduInputNumber from '@public/form/input_number.vue';
export default {
  components: {
    EduInputNumber
  },
  props: {
    couponId: {
      type: [Number, String],
      required: true
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  inject: ['reload'],
  data() {
    return {
      offline: {
        count: 1
      },
      disableSubmit: false
    };
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false);
    },
    onSubmit: function() {
      this.$refs['grant'].validate(valid => {
        if (valid) {
          this.disableSubmit = true;
          this.$http.post(
            '/course/admin/coupon/offline/grant',
            {
              coupon_id: this.couponId,
              coupon_count: this.offline.count
            },
            response => {
              this.$message.success(response.msg, _ => {
                this.reload();
              });
            },
            error => {
              this.$message.error(error.msg);
              this.disableSubmit = false;
            },
            false
          );
        }
      });
    }
  }
};
</script>

<style></style>
